<template>
<!-- 获取歌词 -->
   <div class="box1">
        <div class="Lyric">
            
              <h3>歌词</h3>
             
        
            
            <div class="bg">
                <audio :src="songurl" autoplay></audio>
            <ul>
                <!-- <li v-for="(item,index) in lyric" :key="index">{{item.content}}</li> -->
                <li v-for="(item,index) in this.$store.state.lyric" :key="index">{{item.content}}</li>
            </ul>
            </div>
           
        </div>
        <div class="lyricright" >
               
        </div>
        <!-- <em class="text" @click="suibian">wwwwwwwwwwwwwwwwww</em> -->
    </div>
</template>

<script>
// import axios from 'axios'
// import $ from "jquery"
export default {
name:'SongsLyric',
// props:["songid","songurl"],
props:["songurl"],
 data() {
          return {
        //   lyric:[],
        //   restext:[],
        //element ui  抽屉
        // drawer: false,
        }
  },
  
mounted:function(){
//   this. getlyric();
     
   },
  methods:{
    //   handleClose(done) {
    //     this.$confirm('确认关闭？')
    //       .then(_ => { // eslint-disable-line no-unused-vars
    //         done();
    //       })
    //       .catch(_ => {}); // eslint-disable-line no-unused-vars
    //   },
     // suibian(){
        //  this.$store.commit('mgetsearch');
     // },
     
 /**     getlyric(){
    //    console.log("222222qqqqqqqqq"+this.songurl);
           var that =this;
            //传歌曲id id=1334270281
     axios.get("http://localhost:3000/lyric?id="+that.$store.state.myfavoriteSongid)
     .then(function(res){
                //   console.log(that.songid);    1334270281
                //    console.log(res.data.lrc);
                //获取歌词
                    // that.lyric=res.data.lrc.lyric.split("[");
                    that.restext=res.data.lrc.lyric;
                    console.log("111111111111111111");
                      console.log(res.data.lrc.lyric);
                   let restexts=that.restext;
               //按行分割歌词    
     function parseLyric(restexts) {
            let lyricArr = restexts.split('\n');
            //console.log(lyricArr)//0: "[ti:七里香]" "[ar:周杰伦]"...
            let result = []; //新建一个数组存放最后结果
            //遍历分割后的歌词数组，将格式化后的时间节点，歌词填充到result数组
            for (let i = 0; i < lyricArr.length; i++) {
                let playTimeArr = lyricArr[i].match(/\[\d{2}:\d{2}((\.)\d{2})\]/g); //正则匹配播放时间
                let lineLyric = "";
                if (lyricArr[i].split(playTimeArr).length > 0) {
                    lineLyric = lyricArr[i].split(playTimeArr);
                }

                if (playTimeArr != null) {
                    for (let j = 0; j < playTimeArr.length; j++) {
                        let time = playTimeArr[j].substring(1, playTimeArr[j].indexOf("]")).split(":");
                        //数组填充
                        result.push({
                            time: (parseInt(time[0]) * 60 + parseFloat(time[1])).toFixed(4),
                            content: String(lineLyric).substr(1)
                        });
                    }
                }
            }
            return result;
        }
         // 把生成的数据显示到界面上去  
        that.lyric= parseLyric(restexts); //执行lyc解析  
            console.log("111111111111111111");
// --------------------------------- -------------------------------------------------
           let audio = document.querySelector('audio');

        let lineNo = 0; // 当前行歌词
        let preLine = 6; // 当播放6行后开始滚动歌词
        let lineHeight = -30; // 每次滚动的距离
        let $ul=$("ul");
        // 滚动播放 歌词高亮  增加类名active
        function highLight() {
            let $li = $("li");
            $li.eq(lineNo).addClass("active").siblings().removeClass("active");
            if (lineNo > preLine) {
                $ul.stop(true, true).animate({ top: (lineNo - preLine) * lineHeight });
            }
        }

        highLight();

        // 播放的时候不断渲染
        audio.addEventListener("timeupdate", function() {
            if (lineNo == that.lyric.length) return;
            if ($("li").eq(0).hasClass("active")) {
                $("ul").css("top", "0");
            }
            lineNo =getLineNo(audio.currentTime);
            highLight();
            lineNo++;
        });

        // 当快进或者倒退的时候，找到最近的后面那个result[i].time
        function getLineNo(currentTime) {
            if (currentTime >= parseFloat(that.lyric[lineNo].time)) {
                // 快进
                for (let i = that.lyric.length - 1; i >= lineNo; i--) {
                    if (currentTime >= parseFloat(that.lyric[i].time)) {
                        return i;
                    }
                }
            } else {
                // 后退
                for (let i = 0; i <= lineNo; i++) {
                    if (currentTime <= parseFloat(that.lyric[i].time)) {
                        return i - 1;
                    }
                }
            }
        }

        //播放结束自动回到开头
        audio.addEventListener("ended", function() {
            lineNo = 0;
            highLight();
            audio.play();
            $("ul").css("top", "0");
        });
        // ----------------------------------------？




              },function(error){
                    console.log(error);
              }
          );
        
      },*/
  },
 

}
</script>

<style scoped>
.box1 {
    width: 100%;
    height: 800px;
    background-image: linear-gradient(-45deg, rgb(142, 142, 255), rgb(133, 255, 133));
    margin: auto;
    overflow: hidden;
    display: flex;
    flex-direction: row;
        }
        .Lyric{
            /* width: 50%;
            height: 800px; */
            flex: 1;
            text-align: center;
            line-height: 1.5;
        }
        .lyricright{
            flex: 1;
        }
        h3{
            margin-top: 20px;
            margin-bottom: 20px;
        }
ul li{
    font-size: 16px;
}
.bg {
            width: 100%;
            height:800px;
            background-color:#333;
            margin:20px auto;
            color: #fff;
            overflow: hidden;
            position: relative;
            font-family: "微软雅黑";
        }
 
        .bg ul {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            list-style: none;
        }
 
        .bg ul li {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

        .bg ul li.active {
            color: #2ecc71;
            font-weight: bold;
            font-size: 20px;
        }




        /* 获取歌词

说明 : 调用此接口 , 传入音乐 id 可获得对应音乐的歌词 ( 不需要登录 )

必选参数 : id: 音乐 id

接口地址 : /lyric

调用例子 : /lyric?id=33894312

返回数据如下图 : 获取歌词         */
</style>

